<template>
	<view class="info-photolist">
		<view class="photo-heng">
			<div class="video-container" v-for="(item,index) in videoList" :key="index">
				<video :autoplay="false" ref="myVideo" class="videoss" id="myVideo" :src="item"
				 @error="videoErrorCallback"  @fullscreenchange="handleFullScreenChange"  @play="onVideoPlay"  @pause="onVideoPause"
					 :show-center-play-btn="showPlaybtn" :controls="showPlaybtn" ></video>
				 <div class=" custom-controlsm" v-if="showPlaybtn==false">
						<image v-if="isPlaying" src="/static/image/find/playVideo.png" class="control-iconsm " @click.stop="togglePlay" />
						<image v-else src="/static/image/find/stop.png" class="control-iconsm" @click.stop="togglePlay" />
				 </div>		
			</div>
			
		</view>
	
		
	
	</view>
	
</template>

<script>
	export default {

		data() {
			return {
				isPlaying:false,
				showPlaybtn:false,
				videoList: [
				'/static/image/Index/tiaowu.mp4',	
				// '/static/image/Index/tiaowu.mp4',	
				// '/static/image/Index/tiaowu.mp4',	
				// '/static/image/Index/tiaowu.mp4',	
				// '/static/image/Index/tiaowu.mp4',	
				],

			}
		},
		methods: {
			togglePlay() {
			 const video = uni.createVideoContext('myVideo', this);
			    if (this.isPlaying) {
			      video.pause(); // 暂停视频
			     } else {
						video.requestFullScreen()
			       video.play(); // 播放视频
			    }
			   this.isPlaying = !this.isPlaying; // 切换播放状态
			},
			onVideoPlay() {
				this.isPlaying = true;
			},
			onVideoPause() {
				this.isPlaying = false;
			},
			 videoErrorCallback: function(e) {
					uni.showModal({
							content: e.target.errMsg,
							showCancel: false
					})
			 },
			//退出全屏时暂停
			handleFullScreenChange(e) {
				console.log(e)
				 const video = uni.createVideoContext('myVideo', this);
				if (e.detail.fullScreen ==true) {
					this.showPlaybtn = true
				}else{
					this.showPlaybtn = false
					video.pause(); // 暂停视频
				} 
			},
	
	
		}
	}
</script>

<style lang="scss" scoped>
	.info-photolist {
		background: #fff;
		display: flex;
		padding-left:30rpx;
	
	}
	
	.photo-heng {
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}
	.video-container {
		display: flex;
		flex-wrap: wrap;
		position: relative;
		margin-right:16rpx;
		margin-bottom:16rpx;
	}
	.videoss {
	  display: block;
		width: 219rpx;
		height: 316rpx;
		// z-index: 10;
		border-radius: 16rpx;
	}
	
	.custom-controlsm {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  pointer-events: none; /* 允许点击穿透到视频 */
	}
	.custom-controlbig {
	  position: absolute;
	  top: 45%;
	  left: 300rpx;
	  pointer-events: none; /* 允许点击穿透到视频 */
	}
	
	.control-iconsm {
	  width: 44rpx;
	  height: 44rpx;
	  pointer-events: auto; /* 允许图标接收点击事件 */
	  opacity: 1;
	}
	
	.control-iconbig {
	  width: 150rpx;
	  height: 150rpx;
	  pointer-events: auto; /* 允许图标接收点击事件 */
	  opacity: 1;
	}

	/* 隐藏原生控件 */
	.videoss::-webkit-media-controls {
	  display: none !important;
	}

	

</style>